import style from './index.module.css'
import { Component } from 'react';

class App extends Component {
  state = {mouse:false}
  changeStatus = (status) => {
    return () => {
      this.setState({mouse:status})
    }
  }
  handleDelete = () => {
    const {item,deleteTodo} = this.props
    deleteTodo(item.id)
  }
  handleChangeCheck = (e) => {
    const {item} = this.props
    this.props.changeCheck(item.id,e.target.checked)
  }
render() {
  const {item} = this.props
  const {mouse} = this.state 
  return (
    <li className={style.d} style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.changeStatus(true)} onMouseLeave={this.changeStatus(false)}>
      <label>
        <input type="checkbox" defaultChecked={item.done} checked={item.done} onChange={this.handleChangeCheck} />
        <span>{item.title}</span>
      </label>
      <button className={style.danger} onClick={this.handleDelete}>删除</button>
    </li>
  );
}
  
}

export default App;
